<template>
  <div class="keeps">
    <!-- 顶部 -->
    <myheader title="我的跟帖">
      <span
        slot="left"
        class="iconfont iconjiantou2"
        @click="$router.back()"
      ></span>
      <router-link
        class="van-icon van-icon-wap-home-o"
        to="/index"
        slot="right"
      >
      </router-link>
    </myheader>
    <!-- 内容 -->
    <div class="commentItem">
      <div class="answer" v-for="(v, i) in arr" :key="v.id">
        <div class="time">{{ v.create_date | dateformat }}</div>
        <div class="myanswer">{{ v.content }}</div>
        <div class="sour">
          <p>回复：火星</p>
          <div class="open" @click="opens(i)">
            <span>{{ v.post.title }}</span
            ><van-icon name="arrow" class="opening" />
          </div>
          <!-- style="white-space: pre-wrap;" 使v-html中的文本自动换行 -->
          <div
            class="content"
            v-html="v.post.content"
            style="white-space: pre-wrap"
            v-show="v.open"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import myheader from "@/components/hmheader.vue";
import { getusercommentslist } from "@/apis/user.js";
import { dateformat } from "@/utils/myfilters.js";
export default {
  async mounted() {
    let res = await getusercommentslist();
    // console.log(res);
    this.arr = res.data.data;
    
  },
  components: {
    myheader,
  },
  filters: {
    getusercommentslist,
    dateformat,
  },
  data() {
    return {
      arr: [],
      openss: true,
    };
  },
  methods: {
    opens(i) {
      this.openss = !this.openss;
      if (!this.arr[i].open) {
        //利用this.$set(this.对象[下标],'属性',值)在数组中arr 中添加open属性
        this.$set(this.arr[i], "open", this.openss);
      }
      // 进行单独的open属性修改
      this.arr[i].open = !this.arr[i].open;
      // console.log(this.arr[i]);
    },
  },
};
</script>

<style lang="less" scoped>
.commentItem {
  background-color: #eee;
  padding: 10px;
  > .source {
    > .time {
      color: #999;
      font-size: 13px;
    }
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
    .title {
      font-size: 14px;
      padding: 20px 0;
    }
    .content {
      font-size: 12px;
      color: #999;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      white-space: pre-wrap;
      /deep/p {
        span {
          white-space: normal;
          width: 100%;
        }
      }
    }
  }
  > .answer {
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
    > .time {
      color: #999;
      font-size: 13px;
      line-height: 30px;
    }
    .sour {
      background-color: #eee;
      padding: 10px;
      color: #999;
      line-height: 25px;
      > p {
        font-size: 12px;
      }
      .open {
        font-size: 13px;
        display: flex;
        justify-content: space-between;
        .opening {
          line-height: 25px;
        }
      }
    }
    .myanswer {
      font-weight: bold;
      line-height: 40px;
    }
    .content {
      font-size: 12px;
      color: #999;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
/deep/img {
  width: 100%;
  display: block;
}
</style>